<template>
  <div class="box">
    <!-- 轮播图 -->
    <van-swipe
      class="my-swipe"
      :autoplay="3000"
      indicator-color="white"
      :show-indicators="true"
      :touchable="true"
    >
      <van-swipe-item v-for="data in banner" :key="data.id">
        <img :src="data.picUrl" class="swiper-img" />
      </van-swipe-item>
    </van-swipe>
    <!-- 菜单栏 -->
    <div class="tabbox">
      <img
        :src="data.picUrl"
        v-for="data in tabimg"
        :key="data.id"
        class="tabimg"
      />
    </div>
    <!-- 买热爆品 -->
    <img
      src="https://i8.mifile.cn/v1/a1/72411ddf-3df9-8d3a-7e5d-9429991710dc.webp"
      class="img1"
    />
    <!-- 新品速递 -->
    <img
      src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c25c68694e064f1eda1c207ad481f767.jpg"
      class="img1"
    />
    <div class="newbox">
      <div class="dataitem" v-for="data in newdatalist" :key="data.id">
        <img v-lazy="`${data.picUrl}`" class="itemimg" />
        <p class="itemp1">{{ data.name }}</p>
        <p class="itemp2">{{ data.detail }}</p>
        <p class="itemp3">
          <span class="itemp3-span">￥</span>{{ data.oldprice }}
        </p>
      </div>
    </div>
    <!-- 小家电 -->
    <img
      class="titleimg"
      v-lazy="
        'https://i8.mifile.cn/v1/a1/9a88bb58-8598-5b40-73cb-e18d47d7d073.webp'
      "
    />
    <div class="databox">
      <div class="dataitem" v-for="data in Appliances" :key="data.id">
        <img v-lazy="`${data.picUrl}`" class="itemimg" />
        <p class="itemp1">{{ data.name }}</p>
        <p class="itemp2">{{ data.detail }}</p>
        <p class="itemp3">
          <span class="itemp3-span">￥</span>{{ data.oldprice }}
        </p>
      </div>
    </div>
    <!-- 智能穿戴 -->
    <img
      class="titleimg"
      v-lazy="
        'https://i8.mifile.cn/v1/a1/d0853ab7-58ab-197b-5322-da15baf3b4c0.webp'
      "
    />
    <!-- 耳机音响 -->
    <img
      class="titleimg"
      v-lazy="
        'https://i8.mifile.cn/v1/a1/5f9c55a5-c60f-69c2-04ca-049aad5e26ba.webp'
      "
    />
    <div class="databox">
      <div class="dataitem" v-for="data in Earphone" :key="data.id">
        <img v-lazy="`${data.picUrl}`" class="itemimg" />
        <p class="itemp1">{{ data.name }}</p>
        <p class="itemp2">{{ data.detail }}</p>
        <p class="itemp3">
          <span class="itemp3-span">￥</span>{{ data.oldprice }}
        </p>
      </div>
    </div>
    <!-- 品质灯具 -->
    <img
      class="titleimg"
      v-lazy="
        'https://i8.mifile.cn/v1/a1/5b89b77e-cdd5-bc72-c38b-cda838ee82fa.webp'
      "
    />
    <div class="databox">
      <div class="dataitem" v-for="data in Light" :key="data.id">
        <img v-lazy="`${data.picUrl}`" class="itemimg" />
        <p class="itemp1">{{ data.name }}</p>
        <p class="itemp2">{{ data.detail }}</p>
        <p class="itemp3">
          <span class="itemp3-span">￥</span>{{ data.oldprice }}
        </p>
      </div>
    </div>
    <!-- 生活居家 -->
    <img
      class="titleimg"
      v-lazy="
        'https://i8.mifile.cn/v1/a1/a3e7d93c-1027-78ef-2d5f-f1de56da269e.webp'
      "
    />
    <!-- 便捷出行 -->
    <img
      class="titleimg"
      v-lazy="
        'https://i8.mifile.cn/v1/a1/1cda8576-d3a1-2f11-8359-3c2b14bf0d2d.webp'
      "
    />
    <div class="databox">
      <div class="dataitem" v-for="data in BalanceCar" :key="data.id">
        <img v-lazy="`${data.picUrl}`" class="itemimg" />
        <p class="itemp1">{{ data.name }}</p>
        <p class="itemp2">{{ data.detail }}</p>
        <p class="itemp3">
          <span class="itemp3-span">￥</span>{{ data.oldprice }}
        </p>
      </div>
    </div>
    <!-- 个人清洁 -->
    <img
      class="titleimg"
      v-lazy="
        'https://i8.mifile.cn/v1/a1/c1dce5fa-8aa7-30cd-affa-c1df88f6e2b2.webp'
      "
    />
    <div class="databox">
      <div class="dataitem" v-for="data in Clean" :key="data.id">
        <img v-lazy="`${data.picUrl}`" class="itemimg" />
        <p class="itemp1">{{ data.name }}</p>
        <p class="itemp2">{{ data.detail }}</p>
        <p class="itemp3">
          <span class="itemp3-span">￥</span>{{ data.oldprice }}
        </p>
      </div>
    </div>
    <!-- 儿童专区 -->
    <img
      class="titleimg"
      v-lazy="
        'https://i8.mifile.cn/v1/a1/3d0e1801-e3db-02b0-bbf6-f0fa41055c69.webp'
      "
    />
    <!-- 配件耗材 -->
    <img
      class="titleimg"
      v-lazy="
        'https://i8.mifile.cn/v1/a1/98475d86-8477-e9de-efbe-a17435ffe885.webp'
      "
    />
    <div class="databox">
      <div class="dataitem" v-for="data in FittingConsumable" :key="data.id">
        <img v-lazy="`${data.picUrl}`" class="itemimg" />
        <p class="itemp1">{{ data.name }}</p>
        <p class="itemp2">{{ data.detail }}</p>
        <p class="itemp3">
          <span class="itemp3-span">￥</span>{{ data.oldprice }}
        </p>
      </div>
      <img
        class="img3"
        v-lazy="
          'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c6c71c1c81edf64e2c13c137c2820805.jpg?f=webp'
        "
      />
    </div>
  </div>
</template>

<script>
export default {
  mounted () {
    this.getBanner()
    this.getTabimg()
    this.getNew()
    this.getAppliances()
    this.getAppliances()
    this.getEarphone()
    this.getLight()
    this.getBalanceCar()
    this.getClean()
    this.getFittingConsumable()
  },
  data () {
    return {
      banner: [],
      tabimg: [],
      newdatalist: [],
      Appliances: [],
      Earphone: [],
      Light: [],
      BalanceCar: [],
      Clean: [],
      FittingConsumable: []
    }
  },
  methods: {
    getBanner () {
      this.request.get('/SmartBanner').then((res) => {
        this.banner = res.data
      })
    },
    getTabimg () {
      this.request.get('/SmartTabimg').then((res) => {
        this.tabimg = res.data
      })
    },
    getNew () {
      this.request.get('/SmartNew').then((res) => {
        this.newdatalist = res.data
      })
    },
    getAppliances () {
      this.request.get('/Appliances', { hot: 1 }).then((res) => {
        this.Appliances = res.data
      })
    },
    getEarphone () {
      this.request.get('/Earphone', { hot: 1 }).then((res) => {
        this.Earphone = res.data
      })
    },
    getLight () {
      this.request.get('/Light', { hot: 1 }).then((res) => {
        this.Light = res.data
      })
    },
    getBalanceCar () {
      this.request.get('/BalanceCar', { hot: 1 }).then((res) => {
        this.BalanceCar = res.data
      })
    },
    getClean () {
      this.request.get('/Clean', { hot: 1 }).then((res) => {
        this.Clean = res.data
      })
    },
    getFittingConsumable () {
      this.request.get('/FittingConsumable', { hot: 1 }).then((res) => {
        this.FittingConsumable = res.data
      })
    }
  }
}
</script>

<style lang="less" scoped>
@Highcollapse: {
  content: "";
  clear: both;
  display: block;
};
@textoverflow: {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
};
.box {
  background: #eff1f3;
}
.swiper-img {
  width: 100%;
  display: block;
}
.tabbox {
  .tabimg {
    width: 4.6875rem;
    height: 4.9375rem;
    display: block;
    float: left;
  }
}
.tabbox::after {
  @Highcollapse();
}
.img1 {
  width: 100%;
  display: block;
  margin-top: 0.5rem;
  background-color: #fff;
}
.newbox {
  padding: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  background-color: #fff;
  .dataitem {
    width: 7.1875rem;
    margin-bottom: 1.25rem;
    .itemimg {
      width: 100%;
      display: block;
    }
    .itemp1 {
      width: 80%;
      font-size: 0.8025rem;
      margin: 0.625rem auto 0.125rem;
      text-align: center;
      font-weight: bolder;
      color: #3c3c3c;
      @textoverflow();
    }
    .itemp2 {
      width: 90%;
      margin: 0 auto;
      @textoverflow();
      color: #3c3c3c;
      font-size: 0.625rem;
    }
    .itemp3 {
      text-align: center;
      color: #f54b4b;
      font-family: Heiti SC, STHeiti;
      font-weight: 700;
      font-size: 0.875rem;
      margin-top: 0.125rem;
      .itemp3-span {
        font-size: 0.75rem;
      }
    }
  }
}
.titleimg {
  width: 100%;
  display: block;
  margin-bottom: 0.5rem;
}
.databox {
  padding: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .dataitem {
    width: 7.1875rem;
    padding-bottom: 1.25rem;
    background-color: #fff;
    margin-bottom: 0.5rem;
    .itemimg {
      width: 100%;
      display: block;
    }
    .itemp1 {
      width: 80%;
      font-size: 0.8025rem;
      margin: 0.625rem auto 0.125rem;
      text-align: center;
      font-weight: bolder;
      color: #3c3c3c;
      @textoverflow();
    }
    .itemp2 {
      width: 90%;
      margin: 0 auto;
      @textoverflow();
      color: #3c3c3c;
      font-size: 0.625rem;
    }
    .itemp3 {
      text-align: center;
      color: #f54b4b;
      font-family: Heiti SC, STHeiti;
      font-weight: 700;
      font-size: 0.875rem;
      margin-top: 0.125rem;
      .itemp3-span {
        font-size: 0.75rem;
      }
    }
  }
}
.img3 {
  width: 100%;
}
</style>
